const videoUtil = {
  createDanmakuSettings(targetId: string) {
    // 获取目标容器元素
    const container = document.getElementById(targetId);
    if (!container) {
      return;
    }

    const danmakuContainer = document.createElement('div');
    danmakuContainer.classList.add('danmaku-container');

    container.appendChild(danmakuContainer);

    // 动态插入 CSS 样式
    const style = document.createElement('style');
    style.innerHTML = `
    .danmaku-container {
      position: relative;
    }

    /* 弹幕内容区 */
    .danmaku-content {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
      text-align: center;
      font-size: 24px;
      margin-right: 10px;
    }

    .danmaku-content svg {
      height: 20px;
      width: 20px;
      cursor: pointer;
    }

    /* 弹幕设置菜单 */
    .danmaku-settings {
      display: none;
      position: absolute;
      width: 350px;
      bottom: 140px;
      right: -175px;
      background-color: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      z-index: 200;
    }

    .danmaku-choose {
      padding: 5px 10px 0 10px;
      display: flex;
      align-items: center;
    }

    .danmaku-choose-label {
      width: 80px;
    }

    .danmaku-choose-tip {
      padding: 0 10px;
      display: flex;
      align-items: center;
    }

    .danmaku-choose-tip-text {
      display: flex;
      width: 150px;
      margin-left: 3px;
      font-weight: 200;
      font-size: 8px;
      justify-content: space-between;
    }

    /* 弹幕设置菜单可见时的样式 */
    .danmaku-container:hover .danmaku-settings {
      display: block;
    }

    .danmaku-container:hover {
      height: 200px;
    }

    /* 弹幕按钮样式 */
    .danmaku-btn {
      margin: 5px;
      padding: 8px 16px;
      font-size: 14px;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .danmaku-btn:hover {
      background-color: #45a049;
    }

    .danmaku-btn:active {
      background-color: #3e8e41;
    }

    /* 设置滑动条样式 */
    input[type='range'] {
      width: 150px;
      height: 5px; /* 轨道的高度 */
      -webkit-appearance: none;
      appearance: none;
      margin: 0 5px;
      outline: 0;
      border-radius: 5px;
      margin-bottom: 5px;
      background-color: transparent;
    }

    [type='range']::-webkit-slider-runnable-track {
      border-radius: 5px;
      height: 4px;
      background: #eee;
    }

    [type='range' i]::-webkit-slider-container {
      height: 10px;
      overflow: hidden;
    }

    [type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 10px;
      height: 10px;
      margin-top: -3px;
      border-radius: 50%;
      background-color: #ffffff;
      border: 1px solid transparent;
      border-image: linear-gradient(#4199b5, #32b8c6) 0 fill / 3 10 3 0 / 0px 0px 0 2000px;
      cursor: pointer;
    }
  `;
    document.head.appendChild(style);

    // 创建弹幕内容部分
    const contentDiv = document.createElement('div');
    contentDiv.classList.add('danmaku-content');
    contentDiv.innerHTML =
      '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1735735700113" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4445" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M226.58 320.39h-48c-35.9 0-65-29.1-65-65s29.1-65 65-65h48c35.9 0 65 29.1 65 65s-29.1 65-65 65zM723.58 320.39h-322c-35.9 0-65-29.1-65-65s29.1-65 65-65h322c35.9 0 65 29.1 65 65s-29.1 65-65 65zM402.58 580.39h-224c-35.9 0-65-29.1-65-65s29.1-65 65-65h224c35.9 0 65 29.1 65 65s-29.1 65-65 65zM251.58 839.39h-73c-35.9 0-65-29.1-65-65s29.1-65 65-65h73c35.9 0 65 29.1 65 65s-29.1 65-65 65zM424.58 839.39h-1c-35.9 0-65-29.1-65-65s29.1-65 65-65h1c35.9 0 65 29.1 65 65s-29.1 65-65 65zM954.82 588.59l-93.4-161.78a59.189 59.189 0 0 0-51.27-29.6h-186.8a59.201 59.201 0 0 0-51.27 29.6l-93.4 161.78a59.225 59.225 0 0 0 0 59.2l93.4 161.78a59.189 59.189 0 0 0 51.27 29.6h186.81c21.15 0 40.69-11.28 51.27-29.6l93.4-161.78a59.2 59.2 0 0 0-0.01-59.2z m-238.07 95.78c-36.55 0-66.18-29.63-66.18-66.18 0-36.55 29.63-66.18 66.18-66.18 36.55 0 66.18 29.63 66.18 66.18 0 36.55-29.63 66.18-66.18 66.18z" p-id="4446"></path></svg>';
    danmakuContainer.appendChild(contentDiv);

    // 创建弹幕设置菜单部分
    const settingsDiv = document.createElement('div');
    settingsDiv.classList.add('danmaku-settings');

    // 不透明度设置部分
    const opacityDiv = document.createElement('div');
    opacityDiv.classList.add('danmaku-choose');
    opacityDiv.innerHTML = `
    <span class="danmaku-choose-label">不透明度:</span>
    <input type="range" id="transparent-slider" min="1" max="100" step="1" value="100" />
    <span id="transparent-value">100%</span>
  `;
    settingsDiv.appendChild(opacityDiv);

    // 不透明度提示部分
    const opacityTipDiv = document.createElement('div');
    opacityTipDiv.classList.add('danmaku-choose-tip');
    opacityTipDiv.innerHTML = `
    <span class="danmaku-choose-label"></span>
    <div class="danmaku-choose-tip-text">
      <div>0%</div>
      <div>100%</div>
    </div>
  `;
    settingsDiv.appendChild(opacityTipDiv);

    // 弹幕速度设置部分
    const speedDiv = document.createElement('div');
    speedDiv.classList.add('danmaku-choose');
    speedDiv.innerHTML = `
    <span class="danmaku-choose-label">弹幕速度:</span>
    <input type="range" id="speed-slider" min="1" max="3" step="1" value="2" />
    <span id="speed-value">中</span>
  `;
    settingsDiv.appendChild(speedDiv);

    // 弹幕速度提示部分
    const speedTipDiv = document.createElement('div');
    speedTipDiv.classList.add('danmaku-choose-tip');
    speedTipDiv.innerHTML = `
    <span class="danmaku-choose-label"></span>
    <div class="danmaku-choose-tip-text">
      <div>慢</div>
      <div>中</div>
      <div>快</div>
    </div>
  `;
    settingsDiv.appendChild(speedTipDiv);

    // 字体大小设置部分
    const fontSizeDiv = document.createElement('div');
    fontSizeDiv.classList.add('danmaku-choose');
    fontSizeDiv.innerHTML = `
    <span class="danmaku-choose-label">字体大小:</span>
    <input type="range" id="fontsize-slider" min="1" max="3" step="1" value="2" />
    <span id="fontsize-value">中</span>
  `;
    settingsDiv.appendChild(fontSizeDiv);

    // 字体大小提示部分
    const fontSizeTipDiv = document.createElement('div');
    fontSizeTipDiv.classList.add('danmaku-choose-tip');
    fontSizeTipDiv.innerHTML = `
    <span class="danmaku-choose-label"></span>
    <div class="danmaku-choose-tip-text">
      <div>小</div>
      <div>中</div>
      <div>大</div>
    </div>
  `;
    settingsDiv.appendChild(fontSizeTipDiv);

    // 将弹幕设置菜单添加到容器
    danmakuContainer.appendChild(settingsDiv);

    // 获取滑动条和显示区域
    const transparentSlider = document.getElementById('transparent-slider') as HTMLInputElement;
    const transparentValue = document.getElementById('transparent-value') as HTMLElement;

    const speedSlider = document.getElementById('speed-slider') as HTMLInputElement;
    const speedValue = document.getElementById('speed-value') as HTMLElement;

    const fontsizeSlider = document.getElementById('fontsize-slider') as HTMLInputElement;
    const fontsizeValue = document.getElementById('fontsize-value') as HTMLElement;

    // 为滑动条绑定事件监听器
    transparentSlider.addEventListener('input', function () {
      const value = transparentSlider.value;
      transparentValue.textContent = `${value}%`;
    });

    speedSlider.addEventListener('input', function () {
      const value = speedSlider.value;
      switch (value) {
        case '1':
          speedValue.textContent = '慢';
          break;
        case '2':
          speedValue.textContent = '中';
          break;
        case '3':
          speedValue.textContent = '快';
          break;
      }
    });

    fontsizeSlider.addEventListener('input', function () {
      const value = fontsizeSlider.value;
      switch (value) {
        case '1':
          fontsizeValue.textContent = '小';
          break;
        case '2':
          fontsizeValue.textContent = '中';
          break;
        case '3':
          fontsizeValue.textContent = '大';
          break;
      }
    });
  },
  getDanmakuSettings() {
    // 获取透明度、字体大小、弹幕速度的值
    const opacitySlider = document.getElementById('transparent-slider') as HTMLInputElement;
    const fontsizeSlider = document.getElementById('fontsize-slider') as HTMLInputElement;
    const speedSlider = document.getElementById('speed-slider') as HTMLInputElement;

    // 获取当前的值
    const opacity = opacitySlider.value;
    const fontsize = fontsizeSlider.value;
    const speed = speedSlider.value;

    // 返回值的对象
    return {
      opacity: opacity, // 不透明度值 (1-100)
      fontsize: fontsize, // 字体大小 (1-3)
      speed: speed, // 弹幕速度 (1-3)
    };
  },
};

export default videoUtil;
